<template>
  <div>
    <el-button
      v-if="false"
      type="primary"
      size="small"
      @click="onClickRefresh()"
      class="mb-4"
    >
      刷新
    </el-button>
    <el-table :data="data" style="width: 100%" v-loading="loading">
      <el-table-column
        v-if="false"
        prop="id"
        label="序号"
        width="60px"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="imgUrl" label="预览图" width="200px">
        <template #default="scope">
          <div class="mb-4">
            <el-image
              :preview-teleported="true"
              style="width: 200px; height: 100px"
              :src="`https://www.plazmaburst2.com/${scope.row.imgUrl}`"
              :preview-src-list="[
                `https://www.plazmaburst2.com/${scope.row.imgUrl}`,
              ]"
              :initial-index="0"
              fit="cover"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="地图名称" width="300px">
        <template #default="scope">
          <!-- 超链接 -->
          <!-- 和地图ID一个样式 -->
          <a
            @click.prevent="goToMapPage(scope.row.mapId)"
            :href="`https://www.plazmaburst2.com/?s=9&a=&m=${scope.row.mapId}`"
            target="_blank"
            class="text-blue-500 cursor-pointer hover:text-blue-700"
          >
            {{ scope.row.name }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者" width="200px">
        <template #default="scope">
          <!-- 超链接 -->
          <!-- 和地图ID一个样式 -->
          <a
            @click.prevent="goToAuthorPage(scope.row.author)"
            :href="`https://www.plazmaburst2.com/?a=&s=7&ac=${scope.row.author}`"
            target="_blank"
            class="text-blue-500 cursor-pointer hover:text-blue-700"
          >
            {{ scope.row.author }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="info" label="介绍" min-width="200px">
        <template #default="scope">
          <el-tooltip
            :raw-content="true"
            :content="`<div style='max-width:300px;'>${scope.row.info}</div>`"
            placement="left"
          >
            <div class="max-h-40 overflow-y-auto" v-html="scope.row.info"></div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="mapId" label="地图ID" width="200px">
        <template #default="scope">
          <div
            @click="copyMapID(scope.row.mapId)"
            class="text-blue-500 cursor-pointer hover:text-blue-700"
          >
            {{ scope.row.mapId }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="insertTime" label="更新日期" min-width="160px">
        <template #default="scope">
          {{ getInsertTimeStr(scope.row.insertTime) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import request from "../../../request";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
const data = ref<any[]>([]);
const loading = ref<Boolean>(false);
const getInsertTimeStr = (str: string) => {
  const object = dayjs(Number(str));
  const result = object.format("YYYY-MM-DD HH:mm:ss");
  return result;
};
onMounted(() => {
  getData();
});
const onClickRefresh = () => {
  getData();
};
const getData = async () => {
  loading.value = true;

  let result = await request
    .post("/mapManage/highlitedMap", {})
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      loading.value = false;
    });
  if (Array.isArray(result.data)) {
    const dataRaw = result.data as any[];
    console.log(dataRaw);

    const json = dataRaw.map((item, index) => ({
      ...item,
      id: index,
    }));
    data.value = json;
  }
};
const copyMapID = async (text: string) => {
  // 复制地图ID
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success("复制成功");
  } catch (err) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.cssText = "position:fixed;left:-9999px;top:-9999px";
    document.body.appendChild(textArea);
    textArea.select();
    try {
      const successful = document.execCommand("copy");
      if (!successful) throw new Error("复制失败");
      ElMessage.success("复制成功");
    } finally {
      textArea.remove();
    }
  }
};
const goToAuthorPage = (authorId: string) => {
  // 打开作图玩家资料
  ElMessage.success("正在访问作者资料...");
  setTimeout(() => {
    const url = `https://www.plazmaburst2.com/?a=&s=7&ac=${authorId}`;
    window.open(url, "_blank");
  }, 1000);
};
const goToMapPage = (mapId: string) => {
  // 打开地图详情页
  ElMessage.success("正在访问地图详情页...");
  setTimeout(() => {
    const url = `https://www.plazmaburst2.com/?s=9&a=&m=${mapId}`; // 使用获取的 mapId
    window.open(url, "_blank");
  }, 1000);
};
</script>
